<template>
    <div id="student-login">
    <div style="width: 100%;height: 100%;">
      <birds/>
    </div>
          <div class="loginbox">
            <div class="logoin">
              <div class="logintopimg"></div>
              <el-form :model="user" :rules="rules" ref="userForm">

                <el-form-item prop="username">
                  <el-input placeholder="输入账号" size="medium  " style=" margin-top: 20px; "  prefix-icon="el-icon-user" v-model="user.username"></el-input>
                </el-form-item>

                <el-form-item prop="password" >
                  <el-input placeholder="密码" size="medium " style="  " prefix-icon="el-icon-lock " show-password v-model="user.password"></el-input>
                </el-form-item>

                <el-form-item prop="confirmPassword">
                  <el-input placeholder="请确认密码" size="medium " style="" prefix-icon="el-icon-lock" show-password v-model="user.confirmPassword"></el-input>
                </el-form-item>

                <el-form-item prop="nickname">
                <el-input placeholder="输入昵称" size="medium " style=" "  prefix-icon="el-icon-s-custom" v-model="user.nickname"></el-input>
                </el-form-item>
                <el-form-item prop="phone">
                  <el-input placeholder="请输入手机号" v-model="user.phone" size="medium ">
                    <i slot="prefix" class="el-icon-phone"></i>
                  </el-input>
                </el-form-item>
                <el-form-item prop="codeUI">
                  <el-row :gutter="20">
                    <el-col :span="16">
                      <el-input placeholder="请输入验证码" v-model="user.codeMsg" maxlength="4" onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')">
                        <i slot="prefix" class="el-icon-tickets"></i>
                      </el-input>
                    </el-col>
                    <el-col :span="6">
                      <el-button @click="sendCode" :disabled="disabled">{{btnText}}</el-button>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item style="margin: 10px 0; text-align: right">
                  <el-button type="success" size="medium" style="width: 100%"  autocomplete="off" @click="phoneLogin" >注册</el-button>
                  <el-button type="warning" size="small"  style="width: 100%; margin-left: 0; margin-top: 20px;"  autocomplete="off" @click="backLogin">返回登录</el-button>
                </el-form-item>
              </el-form>
            </div>
          </div>
    </div>

</template>


<script>
import birds from '@/common/bg/birds.vue'


export default {
  components: { birds },
  name: 'Login',
  data () {
    let checkUsername = (rule, value, callback) =>{
      if(!value){
        return callback(new Error('账号不能为空'))
      }else{
        let reg = /^[0-9]+.?[0-9]*$/
        if(!reg.test(value)){
          callback()
        }else{
          return callback(new Error('账号不能是纯数字'))
        }
      }
    }

    let checkPhone = (rule, value, callback) =>{
      if(!value){
        return callback(new Error('手机号不能为空'))
      }else{
        let reg = /^1[3|4|5|7|8][0-9]\d{8}$/
        if(reg.test(value)){
          callback()
        }else{
          return callback(new Error('请输入正确的手机号'))
        }
      }
    }
    var validatePass = (rule, value, callback) => {
      if (!value) {
        callback(new Error("请输入新密码"));
      } else if (value.toString().length < 6 || value.toString().length > 18) {
        callback(new Error("密码长度为6-18位"));
      } else {
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.user.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };

    return {
      showmain: true,
      user: {},
      rules:{
        username: [
          {required: true,validator: checkUsername, trigger: 'blur'},
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' }
        ],
        phone: [
          {validator: checkPhone, trigger: 'change'}
        ],
        password: [
          { required: true, validator: validatePass, trigger: 'blur' }
        ],
        confirmPassword: [
          { required: true, validator: validatePass2, trigger: "blur" }
        ]
      },
      disabled: false,
      btnText: '发送验证码',
      countDown:30,
      time: 10,
      codeMsg:"" //验证码
    }
  },
  methods:{
      register(){
            //表单校验合法
            this.request.post("/user/register",this.user).then(res=>{
              if(res.code === "200"){
                this.$notify({
                  title: '恭喜你注册成功',
                  message: '尊敬的用户你已注册成功成为我们的一员',
                  type: 'success'
                });
                this.$router.push("/login")
              }else {
                this.$message.error(res.msg)
              }
            })

      },
    phoneLogin(){
      this.$refs["userForm"].validate((valid) => {
        if(valid){
          this.register();
        }else{
          this.$message.info("请检查")
        }
      })
    },
    sendCode(){
        if(this.codeMsg === ""){
          this.disabled = true
          this.request.post("/user/sendMsg",this.user).then(res =>{
            if(res.code === "200"){
              this.$message.error(res.msg)
            }else {
              this.$message.error(res.msg);
            }
          })

          // 1.时间开始倒数
          // 2.按钮进入禁用状态
          // 3.如果倒计时结束 按钮恢复可用状态 按钮文字变为重新发送, 时间重置
          // 4.倒计时的过程中 按钮文字为 多少s后重新发送
          let timer = setInterval(()=>{
            this.time --;
            this.btnText = `${this.time}s后重新发送`
            this.disabled = true
            if(this.time <= 0){
              this.disabled = false;
              this.btnText = '重新发送';
              this.time = this.countDown
              clearInterval(timer)
            }
          }, 1000)
        }
    },
    //返回登录
    backLogin(){
      this.$router.push("/login")
    }


  }
}
</script>

<style  scoped>

#student-login{
  width: 100%;
  height: 100%;
  /* background-image: linear-gradient(to bottom right, #FC466B , #3F5EFB); */
  background-repeat: no-repeat;
  background-size:cover;
  position: absolute;
}
.loginbox{
  width: 500px;
  height: 600px;
  background: white;
  border-radius: 15px;
  position: absolute;
  top: 40%;
  left: 70%;
  margin: -200px 0 0 -250px;
}

.logoin{
  width: 300px;
  height: 500px;
  margin: 0 auto;
  alignment: center;

}
.logintopimg{
  width: 180px;
  height: 100px;
  background: url(../../assets/backlogo.png) no-repeat  center;
  background-size: 150% 150%;
  margin: 0 auto;

}

</style>
